/*
    该文件是用来创建路由配置的文件
    createRouter  用来创建路由对象的方法
    createWebHistory  用来创建路由模式的方法 (History)
    History: 路径前面用的是 / 开头，一般需要配合后端使用，容易产生 404
    createWebHashHistory 创建路由模式的方法 (Hash)
    Hash: 路径前面是 # 开头，无需后端配合，使用更安全，但是路径不够美观
*/
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// 导入路由页面
import HomeView from '../views/HomeView.vue'


// 路由规则
const routes = [
  {
    // path  是访问页面时的路径
    path: '/',
    // 命名路由，给路由起一个 别名
    name: 'home',
    // 访问当前路由路径的时候需要显示的组件
    component: HomeView
  },
  {
    path: '/login',
    name: 'login',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // AMD(先加载再使用)  CMD(什么时候用什么时候加载)
    // 路由的懒加载，对于一些不确定是否立即显示的页面，可以使用路由懒加载
    component: () => import('../views/LoginView.vue')
  }
]


// 创建路由对象
const router = createRouter({
  // 配置路由模式
  history: createWebHashHistory(import.meta.env.BASE_URL),
  // 路由规则
  routes
})

// 导出路由配置
export default router
